Skip to content

Refactor: replace workspace RGL with CSS grid#457

Open
urjitc wants to merge 3 commits intomainfrom
capy/remove-react-grid-layout
Open

Refactor: replace workspace RGL with CSS grid#457
urjitc wants to merge 3 commits intomainfrom
capy/remove-react-grid-layout

Conversation

@urjitc
Copy link
Copy Markdown
Member

@urjitc urjitc commented Apr 26, 2026

This PR removes react-grid-layout and migrates the workspace canvas to a responsive CSS grid system. Layout calculation and persistence are removed from item creation flows, though existing records are deserialized without schema changes.

  • Workspace Canvas & Grid

    • Replace ResponsiveGridLayout in WorkspaceGrid with grid grid-cols-[repeat(auto-fill,minmax(18rem,1fr))].
    • Remove drag/resize/folder-hover props and event handlers from WorkspaceGrid and WorkspaceContent.
    • Remove auto-scroll integration for drag operations in WorkspaceContent.
  • Card Rendering & Preview

    • Calculate shouldShowPreview based on item type (document/pdf/quiz/audio) instead of persisted layout dimensions in WorkspaceCard.
    • Remove folder-drag-hover listeners and visual state from FolderCard.
  • Item Creation & Data Flow

    • Remove initialLayout parameters from use-workspace-operations.createItem/createItems.
    • Stop assigning layout in createFolder and createFolderWithItems.
    • Remove imageLayout and initialLayout options from uploaded-asset and dropzone usage.
    • Remove AUTOGEN_LAYOUTS constant and layout assignment from autogen/route.
    • Remove layout from workspace-worker.CreateItemParams.
  • Header & Breadcrumbs

    • Remove drag hover visual state (hoveredBreadcrumbTarget) from WorkspaceHeader.
    • Remove breadcrumb drag target classes and data attributes.
  • Cleanup

    • Delete src/lib/workspace-state/grid-layout-helpers.ts.
    • Remove react-grid-layout from package.json dependencies and next.config.ts transpilePackages.

Open ENG-061 ENG-061

Co-authored-by: capy-ai[bot] <230910855+capy-ai[bot]@users.noreply.github.com>
@urjitc urjitc added the capy Generated by capy.ai label Apr 26, 2026 — with Capy AI
@github-project-automation github-project-automation Bot moved this to Backlog in Dev Board Apr 26, 2026
@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented Apr 26, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
thinkex Ready Ready Preview, Comment Apr 26, 2026 7:09am

Request Review

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 26, 2026

Warning

Rate limit exceeded

@capy-ai[bot] has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 51 minutes and 7 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 51 minutes and 7 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e4d03bd1-b340-4e7b-9586-517712f36b8d

📥 Commits

Reviewing files that changed from the base of the PR and between b223f4b and 19feb57.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (20)
  • next.config.ts
  • package.json
  • src/app/api/workspaces/autogen/route.ts
  • src/app/globals.css
  • src/components/workspace-canvas/FlashcardWorkspaceCard.tsx
  • src/components/workspace-canvas/FolderCard.tsx
  • src/components/workspace-canvas/MarqueeSelector.tsx
  • src/components/workspace-canvas/WorkspaceCanvasDropzone.tsx
  • src/components/workspace-canvas/WorkspaceCard.tsx
  • src/components/workspace-canvas/WorkspaceCardActions.tsx
  • src/components/workspace-canvas/WorkspaceCardContent.tsx
  • src/components/workspace-canvas/WorkspaceCardTypeBadge.tsx
  • src/components/workspace-canvas/WorkspaceContent.tsx
  • src/components/workspace-canvas/WorkspaceGrid.tsx
  • src/components/workspace-canvas/WorkspaceHeader.tsx
  • src/components/workspace-canvas/WorkspaceSection.tsx
  • src/hooks/workspace/use-workspace-operations.ts
  • src/lib/ai/workers/workspace-worker.ts
  • src/lib/uploads/uploaded-asset.ts
  • src/lib/workspace-state/grid-layout-helpers.ts
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch capy/remove-react-grid-layout

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 issue found across 15 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="src/lib/ai/workers/workspace-worker.ts">

<violation number="1" location="src/lib/ai/workers/workspace-worker.ts:305">
P2: Custom agent: **Flag AI Slop and Fabricated Changes**

Stale JSDoc still documents `layout` even though the `layout` parameter was removed.</violation>
</file>

Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.

Comment thread src/lib/ai/workers/workspace-worker.ts Outdated
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented Apr 26, 2026

Greptile Summary

This PR replaces react-grid-layout with a plain CSS auto-fill grid, removing ~400 lines of drag/resize/layout-persistence logic across the workspace canvas, operations hook, autogen route, and worker. Existing item records are read without migration changes, and the deleted grid-layout-helpers.ts has no remaining TypeScript imports. The only cleanup gap is that globals.css was not updated — it still carries a large block of now-dead .react-grid-layout / .react-grid-item styles that should be removed alongside the library.

Confidence Score: 4/5

Safe to merge — no functional regressions found; only P2 style/cleanup issues remain.

All findings are P2 (dead CSS, orphaned JSDoc, indentation). The core refactor is logically consistent and helper functions perform their own folder-scoped filtering.

src/app/globals.css — dead react-grid-layout CSS block was not removed; src/lib/ai/workers/workspace-worker.ts — orphaned JSDoc and indentation artifact.

Important Files Changed

Filename Overview
src/components/workspace-canvas/WorkspaceGrid.tsx Replaced ~625 lines of RGL-based drag/resize/folder-hover logic with a ~170-line CSS grid wrapper; clean and well-structured.
src/lib/ai/workers/workspace-worker.ts Removed layout from CreateItemParams and its propagation; orphaned JSDoc comment and indentation regression left behind in the delete action handler.
src/app/globals.css Not modified in this PR — retains a large block of now-dead .react-grid-layout / .react-grid-item CSS rules that should have been cleaned up alongside the library removal.
src/components/workspace-canvas/WorkspaceCard.tsx Replaced layout-dimension-based shouldShowPreview with a type-based check (document/pdf/quiz/audio); memo comparison updated accordingly.
src/hooks/workspace/use-workspace-operations.ts Removed initialLayout parameters, layout position calculation, and layout persistence from createItem, createItems, updateAllItems, createFolder, and createFolderWithItems; both hasDuplicateName and getNextUniqueDefaultName filter by folderId internally so the allItemsSoFar scope widening in createItems is safe.
src/app/api/workspaces/autogen/route.ts Removed AUTOGEN_LAYOUTS, findNextAvailablePosition calls, and layout fields from all created items; clean removal with no regressions.
src/lib/workspace-state/grid-layout-helpers.ts File deleted; all callers updated correctly — no dangling imports remain in TypeScript source.
src/components/workspace-canvas/WorkspaceContent.tsx Removed drag-scroll integration, updateAllItems, onMoveItems, and onGridDragStateChange props; interface and implementation are consistent.
src/components/workspace-canvas/WorkspaceSection.tsx Removed isGridDragging state and now passes isGridDragging={false} directly to MarqueeSelector; updateAllItems retained for bulk-delete but no longer threaded into WorkspaceContent.

Comments Outside Diff (1)

  1. src/app/globals.css, line 514 (link)

    P2 Dead CSS block not cleaned up after library removal

    The react-grid-layout library was removed from package.json and all TypeScript code, but globals.css still contains a large block of now-unused styles (~100+ rules) targeting .react-grid-layout, .react-grid-item, .react-draggable-dragging, .react-resizable-handle, and their many variants. These selectors will never match any DOM elements and can be safely deleted.

    Fix in Cursor

Fix All in Cursor

Reviews (1): Last reviewed commit: "Replace workspace RGL layout with plain ..." | Re-trigger Greptile

Comment thread src/lib/ai/workers/workspace-worker.ts Outdated
Comment on lines +304 to +305
/** Optional layout { x, y, w, h } for the item (lg breakpoint) */
layout?: { x: number; y: number; w: number; h: number };
},
},
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Orphaned JSDoc comment after property removal

The /** Optional layout { x, y, w, h } for the item (lg breakpoint) */ comment was attached to the layout property that was just removed. It now sits above the closing } of the function parameters with no associated property, which is misleading. The comment should be deleted along with the property.

Suggested change
/** Optional layout { x, y, w, h } for the item (lg breakpoint) */
layout?: { x: number; y: number; w: number; h: number };
},
},
folderId?: string;
},

Fix in Cursor

Comment thread src/lib/ai/workers/workspace-worker.ts Outdated
Comment on lines +991 to +997
return {
success: true,
itemId: params.itemId,
message: existingItem
? `Deleted "${existingItem.name}" successfully`
: "Deleted item successfully",
};
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Indentation regression in delete action handler

The return statement and its body are indented two extra levels relative to the surrounding code (12 spaces vs. the 10 spaces of the adjacent await deleteWorkspaceItem(...) call). This looks like a formatting artifact introduced by the refactor. While it doesn't affect runtime behavior, it breaks visual consistency with every other action branch in the same function.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Fix in Cursor

Co-authored-by: capy-ai[bot] <230910855+capy-ai[bot]@users.noreply.github.com>
Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 issue found across 4 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="src/components/workspace-canvas/WorkspaceCardContent.tsx">

<violation number="1" location="src/components/workspace-canvas/WorkspaceCardContent.tsx:48">
P1: `pdf`, `quiz`, `audio`, and `document` cards no longer render their content body, causing a functional regression where those card types appear blank except for header text.</violation>
</file>

Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.

>
{shouldShowHeader && (
<div className="relative z-10">
{shouldShowHeader && (
Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai Bot Apr 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1: pdf, quiz, audio, and document cards no longer render their content body, causing a functional regression where those card types appear blank except for header text.

Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At src/components/workspace-canvas/WorkspaceCardContent.tsx, line 48:

<comment>`pdf`, `quiz`, `audio`, and `document` cards no longer render their content body, causing a functional regression where those card types appear blank except for header text.</comment>

<file context>
@@ -1,82 +1,57 @@
-      >
-        {shouldShowHeader && (
-          <div className="relative z-10">
+      {shouldShowHeader && (
+        <div
+          className={
</file context>
Fix with Cubic

Co-authored-by: capy-ai[bot] <230910855+capy-ai[bot]@users.noreply.github.com>
Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

0 issues found across 7 files (changes from recent commits).

Requires human review: Auto-approval blocked by 1 unresolved issue from previous reviews.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

capy Generated by capy.ai

Projects

Status: Backlog

Development

Successfully merging this pull request may close these issues.

1 participant